<template>
	<div>
		<el-input v-model="keyWords" size="mini" prefix-icon="el-icon-search" placeholder="按Enter输入组名..." @clear="initWorksList"
		 clearable @keydown.enter.native="initWorksList" style="width: 300px; margin-right: 10px;"></el-input>
		<el-button size="mini" type="primary" @click="initWorksList">搜索</el-button>

		<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
		<el-alert title="学生首次提交作品会自动根据当前小组的个数随机分配小组,管理员可以手动调整." type="success">
		</el-alert>
		<el-alert title="距离报名截止日期前不可将作品提交审核" type="success" :description="howTime" show-icon>
		</el-alert>
		<el-table :data="worksList" stripe style="width: 100%">
			<el-table-column prop="worksName" label="作品名称" fixed width="150">
			</el-table-column>
			<el-table-column prop="users.username" label="作者名" width="130">
			</el-table-column>
			<el-table-column prop="createTime" label="提交时间" width="230">
			</el-table-column>
			
			<el-table-column prop="startCheck" label="是否开始评分" width="130">
			</el-table-column>
			<el-table-column prop="averageScore" label="平均得分" width="100">
			</el-table-column>
			<el-table-column prop="reviewersNum" label="打分次数" width="100">
			</el-table-column>
			<el-table-column prop="totalScore" label="总分" width="100">
			</el-table-column>
			<el-table-column label="所属分组" width="150">
				<template slot-scope="scope">
					<el-select v-model="scope.row.group.groupName" @visible-change="getWorksMessage(scope.$index,scope.row)" @change="changeGroup"
					 placeholder="选择分组" size="mini" style="width: 100px;">
						<el-option v-for="item in groupsList" :key="item.id" :label="item.groupName" :value="item.id" :disabled="item.disabled">
						</el-option>
					</el-select>
				</template>

			</el-table-column>
			<el-table-column prop="competition.cname" label="所属比赛" width="180">
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="250">
				<template slot-scope="scope">

					<el-button size="mini"  :type="scope.row.startCheck == '开始'? 'success':'danger'"
					 @click="changeStartCheck(scope.$index, scope.row)">提交评审</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="display: flex; justify-content:center; margin-top: 0.625rem;">
			<el-pagination background @current-change="currentChange" @size-change="sizeChange" layout="sizes, prev, pager, next, jumper, ->, total, slot "
			 :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Works",
		data() {
			return {
				worksList: [],
				groupsList: [],
				worksId: "",
				total: 0,
				page: 1,
				size: 10,
				keyWords: "",
				howTime: "",
				disabled:true,
			}
		},
		mounted() {
			this.initWorksList();
			this.initGroupsList();
			this.showtime();
			this.initCompetitionList();
		},
		methods: {
			showtime(startTime) {
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(startTime); //定义结束时间

				var lefttime = endtime.getTime() - nowtime.getTime(); //距离结束时间的毫秒数
				if (lefttime < 0) {
					this.disabled = false;
					return this.howTime = "可以开始提交评审";
				}
				var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
				this.howTime = "距离提交评审还有："+leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒";
			},
			changeStartCheck(index, data) {
				this.putRequest("/works/changeStartCheck/?id=" + data.id).then(res => {
					this.initWorksList();
				})
			},
			sizeChange(currentSize) {
				this.size = currentSize;
				this.initWorksList();
			},
			currentChange(currentPage) {
				this.page = currentPage;
				this.initWorksList();
			},
			initGroupsList() {
				this.getRequest("/group/").then(res => {
					if (res) {
						this.groupsList = res.obj;
					}
				})
			},
			// 获取作品的id
			getWorksMessage(index, data) {
				this.worksId = data.id;
			},
			// 获取当前选择的组id
			changeGroup(data) {

				this.putRequest("/works/updateGroup/?groupId=" + data + '&worksId=' + this.worksId).then(res => {
					this.initWorksList();
				})
			},
			initWorksList() {
				this.getRequest("/works/?page=" + this.page + "&size=" + this.size + "&keyWords=" + this.keyWords).then(res => {
					if (res) {
						this.worksList = res.data;
						this.total = res.total;
					}
				})
			},

			initCompetitionList() {
				this.getRequest("/competition/").then(res => {
					if (res) {
						
						this.showtime(res.obj[0].endTime);
					}
				})
			},

		},
	}
</script>

<style>
</style>
